<template>
  <div class="form-container">
    <el-tabs type="border-card">
      <p class="content-tit">单证查询</p>
      <el-form :label-position="labelPosition" label-width="100px" :model="formData4" class="demo-form-inline head-form">
        <el-row type="flex" class="row-bg">
          <el-col :span="8">
            <el-form-item label="单证编码" size="mini">
              <el-select v-model="formData.certifyCode" clearable filterable placeholder="请选择"></el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="单证名称" size="mini">
              <el-input v-model="formData4.certifyName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="row-bg">
          <el-col :span="8">
            <el-form-item label="单证版本" size="mini">
              <el-select v-model="formData.certifyEdition" clearable filterable placeholder="请选择"></el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="单证业务类型" size="mini">
              <el-select v-model="formData.certifyOperType" filterable placeholder="请选择">
                <el-option
                  v-for="item in certifyOperTypeList"
                  :key="item.code"
                  :label="item.codeName"
                  :value="item.code">
                  <span>{{ item.code }}</span> - <span>{{ item.codeName }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div align="right" style="border-right: 20px">
        <el-button type="primary" @click="query" icon="el-icon-search">查询</el-button>
      </div>

      <div>
        <p class="content-tit">
          <span @click="isShow('isShowSingles')" v-if='isShowSingles'>-</span>
          <span @click="isShow('isShowSingles')" v-else>+</span>单证列表
        </p>
        <el-table :data="certifysList" ref="userTable" @selection-change="handleSelectionChange" style="width: 100%"
                  class='table-common' :highlight-current-row="true" border
                  v-show="isShowSingles">
          <el-table-column label="#" checked="selectionData"
                           type="selection"
                           min-width="6%">
          </el-table-column>
          <el-table-column label="序号" type='index' min-width="8%" align="center"></el-table-column>
          <el-table-column prop="certifyCode" label="单证编码" min-width="10%" align="center"></el-table-column>
          <el-table-column prop="certifyName" label="单证名称" min-width="10%" align="center"></el-table-column>
          <el-table-column prop="certifyEdition" label="单证版本" min-width="8%" align="center"></el-table-column>
          <el-table-column prop="certifyType" label="单证类型" min-width="8%" align="center"></el-table-column>
          <el-table-column prop="certifyOperType" label="单证业务类型" min-width="8%" align="center"></el-table-column>
          <el-table-column prop="haveNumber" label="是否有号单证" min-width="6%" align="center"></el-table-column>
          <el-table-column prop="manageCom" label="管理部门" min-width="10%" align="center"></el-table-column>
          <el-table-column label="操作" min-width="10%" align="center">
            <template slot-scope="scope">
              <el-button type="primary"
                         icon="el-icon-view"
                         @click="dialogFormVisible3 = true"
                         size="mini">详情
              </el-button>
              <el-dialog title="" :visible.sync="dialogFormVisible3" width="80%">
                <el-form :label-position="labelPosition" label-width="140px" :model="formData" ref="formData">
                  <el-row type="flex" class="row-bg">
                    <el-col :span="8">
                      <el-form-item label="单证编码" size="mini">
                        <el-input v-model="formData.certifyCode"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="单证名称" size="mini">
                        <el-input v-model="formData.certifyName"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="管理部门" size="mini">
                        <el-select v-model="formData.code2" clearable filterable placeholder="请选择">
                          <el-option value="86-总部"></el-option>
                          <el-option value="8601-分公司"></el-option>
                          <el-option value="860101-支公司"></el-option>
                          <el-option value="86010101-销售部"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row type="flex" class="row-bg">
                    <el-col :span="8">
                      <el-form-item label="单证类型" size="mini">
                        <el-select v-model="formData.certifyType" filterable placeholder="请选择">
                          <el-option
                            v-for="item in certifyTypeList"
                            :key="item.code"
                            :label="item.codeName"
                            :value="item.code">
                            <span>{{ item.code }}</span> - <span>{{ item.codeName }}</span>
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="单证业务类型" size="mini">
                        <el-select v-model="formData.certifyOperType" filterable placeholder="请选择">
                          <el-option
                            v-for="item in certifyOperTypeList"
                            :key="item.code"
                            :label="item.codeName"
                            :value="item.code">
                            <span>{{ item.code }}</span> - <span>{{ item.codeName }}</span>
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="单证状态" size="mini">
                        <el-select v-model="formData.state" filterable placeholder="请选择">
                          <el-option
                            v-for="item in stateList"
                            :key="item.code"
                            :label="item.codeName"
                            :value="item.code">
                            <span>{{ item.code }}</span> - <span>{{ item.codeName }}</span>
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row type="flex" class="row-bg">
                    <el-col :span="8">
                      <el-form-item label="是否有号单证" size="mini">
                        <el-select v-model="formData.haveNumber" filterable placeholder="请选择">
                          <el-option
                            v-for="item in isChecked"
                            :key="item.code"
                            :label="item.codeName"
                            :value="item.code">
                            <span>{{ item.code }}</span> - <span>{{ item.codeName }}</span>
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="单证号码长度" size="mini">
                        <el-input v-model="formData.certifyLength"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="是否回收标志" size="mini">
                        <el-select v-model="formData.tackBackFlag" filterable placeholder="请选择">
                          <el-option
                            v-for="item in isChecked"
                            :key="item.code"
                            :label="item.codeName"
                            :value="item.code">
                            <span>{{ item.code }}</span> - <span>{{ item.codeName }}</span>
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row type="flex" class="row-bg">
                    <el-col :span="8">
                      <el-form-item label="是否限制回销期" size="mini":required="true">
                        <el-select v-model="formData.haveLimit" filterable placeholder="请选择">
                          <el-option
                            v-for="item in isChecked"
                            :key="item.code"
                            :label="item.codeName"
                            :value="item.code">
                            <span>{{ item.code }}</span> - <span>{{ item.codeName }}</span>
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="个人渠道" size="mini">
                        <el-input v-model="formData.maxUnit1"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="非个人渠道" size="mini">
                        <el-input v-model="formData.maxUnit2"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row type="flex" class="row-bg">
                    <el-col :span="8">
                      <el-form-item label="是否限量领用" size="mini">
                        <el-select v-model="formData.haveLimit" filterable placeholder="请选择">
                          <el-option
                            v-for="item in isChecked"
                            :key="item.code"
                            :label="item.codeName"
                            :value="item.code">
                            <span>{{ item.code }}</span> - <span>{{ item.codeName }}</span>
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="个人渠道" size="mini">
                        <el-input v-model="formData.maxUnit1"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="非个人渠道" size="mini">
                        <el-input v-model="formData.maxUnit2"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row type="flex" class="row-bg">
                    <el-col :span="8">
                      <el-form-item label="是否有有效使用期限" size="mini">
                        <el-select v-model="formData.haveValidate" filterable placeholder="请选择">
                          <el-option
                            v-for="item in isChecked"
                            :key="item.code"
                            :label="item.codeName"
                            :value="item.code">
                            <span>{{ item.code }}</span> - <span>{{ item.codeName }}</span>
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="个人渠道" size="mini">
                        <el-input v-model="formData.validate1"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="非个人渠道" size="mini">
                        <el-input v-model="formData.validate2"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row type="flex" class="row-bg">
                    <el-col :span="8">
                      <el-form-item label="单证单价" size="mini">
                        <el-input v-model="formData.certifyPrice"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="装箱规格" size="mini">
                        <el-input v-model="formData.cartonSize">
                          <span>(/箱)</span></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="装订规格" size="mini">
                        <el-input v-model="formData.bindingSize">
                          <span>(/本)</span></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row type="flex" class="row-bg">
                    <el-col :span="8">
                      <el-form-item label="使用渠道" size="mini">
                        <el-select v-model="formData.useTheChannel" filterable placeholder="请选择">
                          <el-option
                            v-for="item in channelList"
                            :key="item.code"
                            :label="item.codeName"
                            :value="item.code">
                            <span>{{ item.code }}</span> - <span>{{ item.codeName }}</span>
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="单证初始号" size="mini">
                        <el-input v-model="formData.startNo"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="库存数量" size="mini">
                        <el-input v-model="formData.certifyStock"></el-input>
                      </el-form-item>
                    </el-col>

                  </el-row>
                  <el-row type="flex" class="row-bg">
                    <el-col :span="16">
                      <el-form-item label="注释" size="mini">
                        <el-input type="textarea" rows="2" v-model="formData.note" ref="textarea"
                                  max-length="50"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row type="flex" class="row-bg">
                    <el-col :span="8">
                      <el-form-item label="上传地址" size="mini">
                        <el-input type="file" v-model="formData.fileName" @click="uploadData"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="使用部门" size="mini">
                        <el-select v-model="formData.useManageCom" filterable placeholder="请选择">
                          <el-option
                            v-for="item in useManageComList"
                            :key="item.code"
                            :label="item.codeName"
                            :value="item.code">
                            <span>{{ item.code }}</span> - <span>{{ item.codeName }}</span>
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row type="flex" class="row-bg">
                    <el-col :span="8">
                      <el-form-item label="是否单证审批" size="mini">
                        <el-select v-model="formData.checked1" v-on:change="showCheckedType1" filterable
                                   placeholder="请选择">
                          <el-option
                            v-for="item in isChecked"
                            :key="item.code"
                            :label="item.codeName"
                            :value="item.code">
                            <span>{{ item.code }}</span> - <span>{{ item.codeName }}</span>
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8" ref="checkedType1" v-if="showType1">
                      <el-form-item label="定义审批规则" size="mini">
                        <el-select v-model="formData.checkedType1" filterable placeholder="请选择">
                          <el-option
                            v-for="item in checkedTypeList1"
                            :key="item.code"
                            :label="item.codeName"
                            :value="item.code">
                            <span>{{ item.code }}</span> - <span>{{ item.codeName }}</span>
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row type="flex" class="row-bg">
                    <el-col :span="8">
                      <el-form-item label="是否征订审批" size="mini">
                        <el-select v-model="formData.checked2" v-on:change="showCheckedType2" filterable
                                   placeholder="请选择">
                          <el-option
                            v-for="item in isChecked"
                            :key="item.code"
                            :label="item.codeName"
                            :value="item.code">
                            <span>{{ item.code }}</span> - <span>{{ item.codeName }}</span>
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8" ref="checkedType2" v-if="showType2">
                      <el-form-item label="征订审批规则" size="mini">
                        <el-select v-model="formData.checkedType2" filterable placeholder="请选择">
                          <el-option
                            v-for="item in checkedTypeList2"
                            :key="item.code"
                            :label="item.codeName"
                            :value="item.code">
                            <span>{{ item.code }}</span> - <span>{{ item.codeName }}</span>
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row type="flex" class="row-bg">
                    <el-col :span="10">
                      <el-form-item label="发放流程" size="mini">
                        <el-select v-model="formData.handOut" filterable placeholder="请选择">
                          <el-option
                            v-for="item in handOutList"
                            :key="item.code"
                            :label="item.codeName"
                            :value="item.code">
                            <span>{{ item.code }}</span> - <span>{{ item.codeName }}</span>
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
                <div align="right">
                  <el-button type="primary" @click="dialogFormVisible3 = false,add" size="small">返回</el-button>
                </div>
              </el-dialog>
            </template>
          </el-table-column>
        </el-table>
        <div class="mar15 " align="right" v-show="isShowSingles">
          <el-pagination
            @current-change="handleCurrentChangeSingle"
            :current-page="selfPage.currentPage"
            :page-size="selfPage.perPage"
            layout="total, prev, pager, next, jumper"
            :total="selfPage.totalSize">
          </el-pagination>
        </div>
      </div>
      <div>
        <p class="content-tit">征订审核</p>
        <div ref="checkedApply">
          <el-form v-show="flag1" label-position="labelPosition" label-width="100px" :model="formData1">
            <el-row type="flex" class="row-bg">
              <el-col :span="8">
                <el-form-item label="审批人" size="mini":required="true">
                  <el-select v-model="formData1.checkedName" filterable placeholder="请选择征订机构编码" disabled="true">
                    <el-option
                      v-for="item in checkedList"
                      :key="item.code"
                      :label="item.codeName"
                      :value="item.code">
                      <span>{{ item.code }}</span> - <span>{{ item.codeName }}</span>
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="审批时间" size="mini":required="true">
                  <el-date-picker v-model="formData1.checkedDate" type="date" placeholder="请输入申请时间" :format="'yyyy-MM-dd'"
                                  :value-format="'yyyy-MM-dd'">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="审批结果" size="mini":required="true">
                  <el-select v-model="formData1.result" filterable placeholder="请选择">
                    <el-option
                      v-for="item in isChecked"
                      :key="item.code"
                      :label="item.codeName"
                      :value="item.code">
                      <span>{{ item.code }}</span> - <span>{{ item.codeName }}</span>
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex" class="row-bg">
              <el-col :span="16">
                <el-form-item label="原因说明" size="mini">
                  <el-input type="textarea" rows="2"
                            v-model="formData.reason"
                            ref="textarea"
                            max-length="50">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>

          <el-steps :active="active" ref="step" align-center finish-status="success">
            <el-step title="单证定义 1" description="分公司初级单证管理员->单证定义"></el-step>
            <el-step title="单证定义审核 2" description="分公司高级单证管理员->单证定义审核"></el-step>
            <el-step title="单证定义复核 3" description="总公司初级单证管理员->单证定义复核"></el-step>
            <el-step title="单证定义确认 4" description="总公司高级单证管理员->单证定义确认"></el-step>
          </el-steps>
          <div align="right">
            <el-button type="primary" @click="handleStep">提交</el-button>
          </div>
        </div>
      </div>
    </el-tabs>
  </div>
</template>

<script>
  export default {
    name: "card-approve",
    data() {
      return {
        isShowSingles: true,
        flag1: true,
        flag2: false,
        flag3: false,
        labelPosition: "right",
        dialogFormVisible3: false,
        active: 1,
        formData: {
          certifyCode: '',
          certifyEdition: 202001,
          certifyName: '补充文件',
          manageCom: '',
          userManageCom: '1',
          certifyType: '有价单证',
          certifyEdition: 202001,
          certifyOperType: '契约',
          haveNumber: '是',
          state: '1',
          checked1: '',
          checkedType1: '',
          checked2: '',
          checkedType2: '',
          haveLimit: '2',
          maxUnit1: '',
          maxUnit2: '',
          certifyLength: '6',
          tackBackFlag: '1',
          haveValidate: '1',
          validate1: '30',
          validate2: '70',
          certifyPrice: '0.2',
          cartonSize: '25',
          bindingSize: '25',
          useTheChannel: '2',
          certifyStock: '',
          startNo: '',
          handOut: '1'
        },
        formData4: {
          certifyCode: '',
          certifyName: '',
          certifyOperType: '',
          certifyType: '',
        },
        selfPage: {
          currentPage: 1,
          hasMore: true,
          perPage: 10,
          totalPage: 0,
          totalSize: 0
        },
        stateList: [
          {code: '1', codeName: '启用'},
          {code: '2', codeName: '停用'}
        ],
        useManageComList: [
          {code: '1', codeName: '财务部'},
          {code: '2', codeName: '业务部'}
        ],
        certifyOperTypeList: [{code: '1', codeName: '契约'}, {code: '2', codeName: '保全'}, {code: '3', codeName: '理赔'}],
        certifyTypeList: [{code: '1', codeName: '有价单证'}],
        isChecked: [{code: '1', codeName: '通过'}, {code: '2', codeName: '不通过'}],
        channelList: [{code: '1', codeName: '个人'}, {code: '2', codeName: '团体'}, {code: '3', codeName: '银行'}, {
          code: '4',
          codeName: '中介'
        }, {code: '5', codeName: '网销'}],
        checkedTypeList1: [{code: '1', codeName: '分公司 -> 总公司'}],
        checkedTypeList2: [{code: '1', codeName: '支公司 -> 分公司 -> 总公司'}, {code: '2', codeName: '分公司 -> 总公司'}],
        checkedList: [
          {code: 1, codeName: '支公司初级专员'},
          {code: 2, codeName: '支公司高级专员'},
          {code: 3, codeName: '分公司初级单证管理员'},
          {code: 4, codeName: '分公司高级单证管理员'},
          {code: 5, codeName: '总公司初级单证管理员'},
          {code: 6, codeName: '总公司高级单证管理员'},
        ],
        formData1: {
          checkedName: 3,
          checkedDate: '',
          result: '1'
        },

        certifysList: [
          {
            certifyCode: '010201',
            certifyName: '补充文件',
            certifyEdition: 202001,
            certifyType: '有价单证',
            certifyOperType: '契约',
            haveNumber: '是',
            manageCom: '财务部'
          },
          {
            certifyCode: '010202',
            certifyName: '财务补充文件',
            certifyEdition: 202001,
            certifyType: '有价单证',
            certifyOperType: '契约',
            haveNumber: '是',
            manageCom: '财务部'
          },
        ],
        handOutList: [
          {code: '1', codeName: '总公司->分公司->支公司->营业部->代理人'},
          {code: '2', codeName: '总公司->分公司->业务部门->代理人'},
          {code: '3', codeName: '总公司->业务部门->代理人'},
          {code: '4', codeName: '总公司->业务部门-分公司业务部门->代理人'},
        ]
      }
    },
    methods: {
      isShow(val) {
        this[val] = !this[val]
      },
      handleSelectionChange(val) {
        this.selectionData = val;
      },
      handleCurrentChangeSingle(num) {
        this.selfFormData.pageNum = num
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      showCheckedType1() {
        if (this.formData.checked1 === '2') {
          this.showType1 = false;
          this.$refs.checkedType1.style.display = 'none'
        }
        this.showType1 = true;
        this.$refs.checkedType1.style.display = 'block'
      },
      showCheckedType2() {
        if (this.formData.checked2 === '2') {
          this.showType2 = false;
          this.$refs.checkedType2.style.display = 'none'
        }
        this.showType2 = true;
        this.$refs.checkedType2.style.display = 'block'
      },
      handleStep() {
        if (this.active++ > 3) this.active = 1;
        this.formData1.checkedName = this.active + 3;
        if (this.formData1.checkedName === 7) {
          this.formData1.checkedName = 6;
        }
      }
    }
  }
</script>

<style scoped>

</style>
